<template>
  <div class="nest">
    <el-form class="search-form" inline size="mini">
      <el-form-item>
        <el-input v-model="search.username" placeholder="输入员工名称" clearable @change="handleSearch" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="search.username" placeholder="输入账号" clearable @change="handleSearch" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="search.user_status" placeholder="角色" clearable @change="handleSearch">
          <el-option label="管理员" value="管理员" />
          <el-option label="运营" value="运营" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="search.user_status" placeholder="状态" clearable @change="handleSearch">
          <el-option label="启用" value="启用" />
          <el-option label="禁用" value="禁用" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
      </el-form-item>
      <addAccount ref="addAccount" @success="handleSearch"></addAccount>
    </el-form>
    <div class="table">
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;">
        <el-table-column prop="id" label="ID" width="130" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="v2" label="员工名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="v3" label="账号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="v4" label="角色" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="v5" label="状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="v7" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="$refs.addAccount.handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="queryDetailed">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;">
        <el-pagination :current-page.sync="pageto" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </div>
  </div>
</template>

<script>
import addAccount from "./addAccount.vue"
const ModelSearch = {
  username: '',
  mobile: '',
  user_status: '',
  name: '',
  store_id: '',
  role_id: '',
  dates: []
}

const tableData = [{
  id: '1',
  v2: '张三',
  v3: '13575737563',
  v4: '管理员',
  v5: '启用',
  v6: 'L1',
  v7: '2024-05-24 18:00:11',
},]

export default {
  components: { addAccount },
  data() {
    return {
      search: { ...{}, ...ModelSearch },
      tableData,
      pageto: 1, //是	string	页码
      pageSize: 10, //每页条数
      total: 100
    }
  },
  methods: {
    queryDetailed() {
      this.$router.push({ name: 'list-detailed', query: {} })
    },
    updateReIntegralTask(data) {
      console.log(data);

    },
    handleSearch() {

    },
    handleResetSearch() {

    },
    //分页
    handleSizeChange(e) {
      this.pageSize = e;

    },
    handleCurrentChange(e) {
      this.pageto = e;

    },
  }
}
</script>

<style lang="scss">
.nest {
  width: 100%;
  height: 60px;

  .search-form {
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 20px;

    .el-form-item--mini.el-form-item {
      margin-bottom: 0;
    }
  }

  .table {
    padding: 12px 20px;
    background: #fff;
  }
}
</style>
